<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>基本操作控件</title>
    <link rel="stylesheet" href="css/ol.css" />
    <script src="js/ol.js"></script>
    <script src="js/jquery-1.11.2.min.js"></script>
    <style type="text/css">
        #mapCon {
            width: 100%;
            height: 90%;
            position: absolute;
        }

        #menu {
            float: left;
            position: absolute;
            bottom: 10px;
            z-index: 2000;
        }

        .tooltip-inner {
            white-space: nowrap;
        }
    </style>
</head>
<body>
<div class="ToolLib">
    <input type="button" class="ButtonLib" id="zoom-out" value="单击缩小" />
    <input type="button" class="ButtonLib" id="zoom-in" value="单击放大" />
    <input type="button" class="ButtonLib" id="panto" value="平移到【中国】" />
    <input type="button" class="ButtonLib" id="restore" value="复位" />
</div>
<div id="mapCon" title="地图显示" style="padding: 5px">
</div>
<script type="text/javascript">
    "use strict";
    //实例化map对象加载地图
    var map = new ol.Map({
        //地图容器div的id
        target: 'mapCon',
        //地图容器中加载的图层
        layers: [
            //加载瓦片图层数据
            new ol.layer.Tile({
                title: "天地图矢量图层",
                source: new ol.source.XYZ({
                    url: "http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=b74ca9a5dbd96fab6338ab9d239180fb",
                    wrapX: false
                })
            }),
            new ol.layer.Tile({
                title: "天地图矢量图层注记",
                source: new ol.source.XYZ({
                    url: "http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=b74ca9a5dbd96fab6338ab9d239180fb",
                    wrapX: false
                })
            })
        ],
        //地图视图设置
        view: new ol.View({
            //地图初始中心点
            center: [0, 0],
            //地图初始显示级别
            zoom: 3,
            mixZoom:1, //缩放的最小级别
            maxZoom:12, //缩放的最大级别
            rotation:Math.PI/6,  //顺时针旋转30度
            //参考系设置
            //projection: "EPSG:4326"
        })
    });

    //地图视图的初始参数
    var view = map.getView();
    var zoom = view.getZoom();
    var center = view.getCenter();
    var rotation = view.getRotation();

    //单击缩小按钮功能
    document.getElementById('zoom-out').onclick = function () {
        //获取地图视图
        var view = map.getView();
        //获得当前缩放级数
        var zoom = view.getZoom();
        //地图缩小一级
        view.setZoom(zoom - 1);
    };
    //单击放大按钮功能
    document.getElementById('zoom-in').onclick = function () {
        //获取地图视图
        var view = map.getView();
        //获得当前缩放级数
        var zoom = view.getZoom();
        view.setZoom(zoom + 1);
        //地图放大一级
    };
    //view.setZoom(zoom + 1);
    //平移功能（移到到武汉市）
    document.getElementById('panto').onclick = function () {
        //获取地图视图
        var view = map.getView();
        var wh = ol.proj.fromLonLat([105.0098,35.6543]);
        //平移地图
        view.setCenter(wh);
        view.setZoom(5);
    };
    //复位功能（复位到初始状态）
    document.getElementById('restore').onclick = function () {
        //初始中心点
        view.setCenter(center);
        //初始旋转角度
        view.setRotation(rotation);
        //初始缩放级数
        view.setZoom(zoom);
    };

    /*//为内置的缩放控件与旋转控件添加tooltip提示信息
    $('.ol-zoom-in, .ol-zoom-out').tooltip({
        //tooltip在右侧显示
        placement: 'right'
    });
    //tooltip在左侧显示
    $('.ol-rotate-reset, .ol-attribution button[title]').tooltip({
        placement: 'left'
    });*/
</script>
</body>
</html>